<script setup>
import SonSonCom from './SonSonCom.vue';


// 子组件通过 props 接收父组件传递的数据
const props = defineProps({
  msg:{
    type:String,
    required:true
  }
})

const emit = defineEmits(['update:msg'])

const sendMsg = () => {
  emit('update:msg','子组件->' + props.msg)
}

const myMsg = '子组件自己内部的数据'
const validate = ()=>{
  console.log('内部实现了表单校验');
}

// 默认情况下，通过模板引用取到的组件的公开实例，不会暴露任何在 <script setup> 中声明的绑定。
// 需要通过 defineExpose 主动暴露后，父组件才能调用组件的方法
defineExpose({
  myMsg,
  validate
})


</script>
<template>
<!-- 结构 -->
  <div class="box">
    <h2>子组件</h2>
    <p>{{ msg }}</p>
    <button @click="sendMsg">点击发送消息</button>
    <SonSonCom />
  </div>

</template>

<style scoped>
/* 样式 */
.box{
  padding: 20px;
  border: 5px solid #f476;
}
</style>
